import React from 'react'
import {Checkbox, Modal, Empty, Popconfirm} from 'antd'

const OperationProgramsModal = ({user, isOperationProgramVisible, handleCancel, removeProgram}) => {
  const {username, programs} = user
  return <Modal
    title={username}
    visible={isOperationProgramVisible}
    footer={null}
    onCancel={handleCancel}
  >
    {
      programs
      ? programs.map(program =>
        <p key={program.id}>
          <Popconfirm title='Are you sure remove?'
            onConfirm={() => removeProgram(user.id, program.id)}
            okText='Yes' cancelText='No'>
            <Checkbox>{program.title}</Checkbox>
          </Popconfirm>
        </p>)
        : <Empty />
    }
  </Modal>
}

export default OperationProgramsModal
